<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=O3ec1roDLm7Xf5RcQdaTQkfFykOtasxq"></script>
</head>

<body>
    <div class="info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>

</html>
<script>
    data_list = [{
        "title": "泽林教育(总部)",
        "addr": "广东省深圳市南山区粤海街道科技中三路5号国人通信大厦A座",
        "phone": "400-800-1024",
        "long": "113.947911",
        "wei": "22.549487"
    }, {
        "title": "泽林科技集团(宝安分公司)",
        "addr": "广东省深圳市宝安区西乡街道宝安大道4754号新中泰商务大厦6楼",
        "phone": "400-800-1024",
        "long": "113.854457",
        "wei": "22.60646"
    }, {
        "title": " 泽林科技集团(龙华分公司)",
        "addr": "广东省深圳市龙华区龙华街道创业路78号汇海广场B座22楼01室",
        "phone": "400-800-1024",
        "long": "114.0341377",
        "wei": "22.663333"
    }, {
        "title": "深圳市泽林信息网络科技有限公司",
        "addr": "深圳市龙岗区南湾街道丹竹头窝肚14栋",
        "phone": "400-800-1024",
        "long": "114.221103",
        "wei": "22.664824"
    }, {
        "title": "泽林科技集团(广州分公司)",
        "addr": "广东省广州市黄埔区鱼珠街道蟹山西路67号鱼珠商业大厦",
        "phone": "400-800-1024",
        "long": "113.439496",
        "wei": "23.107027"
    }, {
        "title": "泽林科技集团(东莞分公司)",
        "addr": "广东省东莞市东城街道东城中路东城创客谷302室",
        "phone": "400-800-1024",
        "long": "113.781018",
        "wei": "23.040377"
    }, {
        "title": "泽林科技集团(济南分公司)",
        "addr": "山东省济南市历城区舜华路2000号舜泰广场11号楼北楼902室",
        "phone": "400-800-1024",
        "long": "117.148356",
        "wei": "36.669663"
    }, {
        "title": "深圳市泽林教育科技有限公司重庆分公司",
        "addr": "重庆市渝中区北区路55、57号第二层",
        "phone": "400-800-1024",
        "long": "106.567854",
        "wei": "29.569499"
    }, {
        "title": "泽林科技集团(石家庄分公司)",
        "addr": "河北省石家庄市新华区兴凯路88号华凯中心2楼201室",
        "phone": "400-800-1024",
        "long": "114.48317",
        "wei": "38.057853"
    }, {
        "title": "北京上泽林企业咨询有限公司",
        "addr": "北京市朝阳区建外SOHO东区7号楼2704室",
        "phone": "400-800-1024",
        "long": "116.464629",
        "wei": "39.910634"
    }, {
        "title": "上海泽林企业服务有限公司",
        "addr": "北京市朝阳区建外SOHO东区7号楼2704室",
        "phone": "400-800-1024",
        "long": "121.810912",
        "wei": "31.376524"
    }, {
        "title": "泽林科技集团(厦门分公司)",
        "addr": "福建省厦门市思明区软件园二期观日路18号6楼",
        "phone": "400-800-1024",
        "long": "118.184935",
        "wei": "24.492564"
    }, {
        "title": "泽林科技集团(长沙分公司)",
        "addr": "湖南省长沙市天心区芙蓉中路三段398号新时空大厦23层B区",
        "phone": "400-800-1024",
        "long": "112.991487",
        "wei": "28.16631"
    }, {
        "title": "武汉泽林自动化科技有限责任公司",
        "addr": "湖北省武汉市洪山区关东街道光谷世界城广场写字楼",
        "phone": "400-800-1024",
        "long": "114.411664",
        "wei": "30.512013"
    }, {
        "title": "四川蓉大泽林科技有限公司",
        "addr": "成都市温江区天府镇金府路东段1号红泰2-3 1幢2层",
        "phone": "400-800-1024",
        "long": "103.820736",
        "wei": "30.699118"
    }];
    var map = new BMapGL.Map('container'); // 创建Map实例
    data_list.forEach(function(item, index) {
        // var point = new BMapGL.Point(113.947764, 22.549248);
        var point = new BMapGL.Point(item.long, item.wei);
        //113.947764,22.549248
        map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        // 创建点标记
        var marker1 = new BMapGL.Marker(point);

        // 在地图上添加点标记
        map.addOverlay(marker1);

        var opts = {
            width: 200, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: `${item.title}`, // 信息窗口标题
            message: "到这里和我一起学前端吧！"
        }
        var infoWindow = new BMapGL.InfoWindow(`地址：${item.addr} 电话：${item.phone}`, opts); // 创建信息窗口对象 
        marker1.addEventListener("click", function() {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });

    });
</script>